<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="toCode" label="跳转权限值" />
      <el-table-column label="操作">
        <el-button
          type="primary"
          :icon="Plus"
          size="small"
          v-permission="'btn.Permission.add'"
        ></el-button>
        <el-button
          type="primary"
          :icon="Edit"
          size="small"
          v-permission="'btn.Permission.update'"
        ></el-button>
        <el-button
          type="danger"
          :icon="Delete"
          size="small"
          v-permission="'btn.Permission.remove'"
        ></el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from "vue";
import type { PermissionList } from "@/Api/acl/model/permissionModel";
import { getPermissionListUrl } from "@/Api/acl/permission";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
export default {
  name: "XPermission",
};
</script>

<script lang="ts" setup>
// interface User {
//   id: number;
//   date: string;
//   name: string;
//   hasChildren?: boolean;
//   children?: User[];
// }

// const load = (
//   row: User,
//   treeNode: unknown,
//   resolve: (date: User[]) => void
// ) => {
//   setTimeout(() => {
//     resolve([
//       {
//         id: 31,
//         date: "2016-05-01",
//         name: "wangxiaohu",
//       },
//       {
//         id: 32,
//         date: "2016-05-01",
//         name: "wangxiaohu",
//       },
//     ]);
//   }, 1000);
// };

const tableData = ref<PermissionList>([]);

// const tableData = [
//   {
//     id: 3,
//     date: "2016-05-01",
//     name: "wangxiaohu",
//     children: [
//       {
//         id: 31,
//         date: "2016-05-01",
//         name: "wangxiaohu",
//       },
//       {
//         id: 32,
//         date: "2016-05-01",
//         name: "wangxiaohu",
//       },
//     ],
//   },
// ];

onMounted(async () => {
  const res = await getPermissionListUrl();
  tableData.value = res.children;
});
</script>

<style scoped></style>
